<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 引入Element Plus的CSS，这里假设是通过CDN引入，你也可以替换为本地路径 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        /* 把之前Vue组件里的scoped样式在这里统一放置，去除scoped限制，样式作用域变为全局，需注意可能的样式冲突问题，可按需调整 */
        .frame {
            height: 80vh;
            margin: auto 10px;
        }

        .message-list {
            text-align: center;
            margin: auto 20px 20px;
        }

        .system-message {
            color: #888;
            width: auto;
            font-size: 12px;
            padding: 5px 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            display: inline-block;
            background-color: #f4f4f5;
        }

        .public-message {
            position: relative;
            margin-bottom: 10px;
            padding-left: 60px;
            text-align: left;
        }

        .user {
            position: absolute;
            left: 0;
        }

        .name {
            position: absolute;
            left: 60px;
            top: 0;
            color: #888;
            font-size: 12px;
            white-space: nowrap;
        }

        .content {
            color: #333;
            position: relative;
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            display: inline-block;
            background-color: #e2e2e2;
            word-break: break-all;
        }

        .content::after {
            content: "";
            position: absolute;
            left: -10px;
            top: 14px;
            border-width: 10px;
            border-style: solid dashed dashed;
            border-color: #e2e2e2 transparent transparent;
        }

        .mine {
            text-align: right;
            padding-left: 0;
            padding-right: 60px;

        }

        .mine.user {
            right: 10px;
        }

        .mine.name {
            left: auto;
            right: 55px;
        }

        .mine.content {
            color: #fff;
            background-color: #5FB878;
        }

        .mine.content::after {
            left: auto;
            right: -10px;
            border-top-color: #5FB878;
        }

        .input-box {
            margin-left: 30px;
            margin-right: 40px;
        }

        .send-button {
            margin-left: 15px;
        }

        .date-picker {
            margin-bottom: 20px;
        }
    </style>
    <meta charset="UTF-8">
    <title>Chat Page</title>
</head>

<body>
<!-- 聊天记录展示区域 -->
<div class="frame">
    <ul class="message-list">
        <!-- 这里用于动态渲染消息列表，通过JavaScript后续添加消息元素 -->
    </ul>
</div>
<!-- 输入框和发送按钮区域 -->
<div class="flex-between input-box">
    <input type="text" id="content-input" />
    <button id="send-button" disabled>发送</button>
</div>
<!-- 日期选择器和聊天记录表格区域 -->
<div class="text-center date-picker">
    <input type="datetime-local" id="start-date" placeholder="开始日期">
    <input type="datetime-local" id="end-date" placeholder="结束日期">
    <button id="query-button">查询聊天记录</button>
</div>
<table id="message-table" border="1" style="width: 100%">
    <thead>
    <tr>
        <th>类型</th>
        <th>发送者</th>
        <th>发送时间</th>
        <th>内容</th>
    </tr>
    </thead>
    <tbody>
    <!-- 这里通过JavaScript后续填充聊天记录表格行 -->
    </tbody>
</table>
<div id="pagination" class="pagination"></div>

<!-- 用于展示从后端获取的session相关信息（示例） -->
<div id="session-info"></div>

<!-- 引入Element Plus的JavaScript库，这里同样假设通过CDN引入，可按需替换为本地路径 -->
<script src="https://unpkg.com/element-plus"></script>
<script>
    // 页面加载完成后执行以下代码
    window.onload = function () {
        // 存储聊天消息的数组
        const messages = [];
        // 存储聊天记录总条数，用于分页等情况（示例，可根据实际调整）
        let size = 0;
        // 当前页码，初始为0（示例，可根据实际分页逻辑调整）
        let currentPage = 0;
        // 存储开始日期和结束日期的变量
        let startDate = '';
        let endDate = '';
        // WebSocket实例
        let webSocket = null;

        // 调用获取session信息的函数（示例，可根据实际业务决定何时调用）
        getSessionInfo();

        // 检查浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            initWebSocket();
        }

        // 获取发送按钮、查询按钮等DOM元素
        const sendButton = document.getElementById('send-button');
        const queryButton = document.getElementById('query-button');
        const contentInput = document.getElementById('content-input');

        // 给查询按钮绑定点击事件
        queryButton.addEventListener('click', function () {
            startDate = document.getElementById('start-date').value;
            endDate = document.getElementById('end-date').value;
            getMessages(startDate, endDate);
        });

        // 给发送按钮绑定点击事件，并修复按钮不可点击问题（移除disabled属性）
        sendButton.addEventListener('click', function () {
            const content = contentInput.value;
            if (content!== '') {
                sendMessage(content);
                contentInput.value = '';
            }
        });
        sendButton.disabled = false;

        // 初始化WebSocket连接
        function initWebSocket() {
            // 获取token，这里假设你有对应的方法来获取，示例中暂时写死，实际需按真实逻辑处理
            const token = 'your_token';
            webSocket = new WebSocket('ws://localhost:8040/chat');
            webSocket.onmessage = onMessage;
            // webSocket.onerror = onError;
        }

        // 处理接收到WebSocket消息的回调函数
        function onMessage(event) {
            const message = JSON.parse(event.data);
            messages.push(message);
            // 滚动聊天记录区域到最底部，简单模拟之前Vue组件中的逻辑
            const wrap = document.querySelector('.frame.message-list');
            wrap.scrollTop = wrap.scrollHeight;
        }

        // 处理WebSocket连接错误的回调函数
        function onError() {
            // 显示错误提示，简单模拟Element Plus的消息提示功能
            alert("WebSocket连接失败");
        }

        // 发送消息的函数
        function sendMessage(content) {
            if (webSocket && webSocket.readyState === WebSocket.OPEN) {
                webSocket.send(content);
            } else {
                alert("WebSocket未连接或连接已关闭，请稍后再试");
            }
        }

        // 获取聊天记录的函数
        function getMessages(start, end) {
            // 构造请求参数，这里简单示例，实际可能需要更多处理，比如格式转换等
            const pageNumber = currentPage;
            const pageSize = 10;
            const params = {
                pageNumber,
                start,
                end
            };
            // 这里假设你有对应的AJAX请求方法来调用后端接口，示例中使用fetch API简单模拟，需按实际调整
            fetch('/chats?pageNumber=' + pageNumber + '&start=' + start + '&end=' + end)
                .then(response => response.json())
                .then(result => {
                    if (result.code === '0000') {
                        messages.length = 0;  // 清空原有消息列表
                        const messageList = result.data.list;
                        messages.push(...messageList);  // 将新获取的消息添加到列表
                        size = result.data.size;
                        // 这里可以添加代码更新聊天记录表格等展示逻辑（示例中省略具体更新表格操作）
                    }
                });
        }

        // 示例函数，用于从后端获取session相关信息并展示在页面（实际获取逻辑需按后端接口等情况调整）
        function getSessionInfo() {
            // 假设通过fetch调用后端获取session信息的接口，这里示例接口地址为'/session-info'，需按实际调整
            fetch('/chats/session-info')
                .then(response => response.json())
                .then(result => {
                    if (result.username != '') {
                        const sessionInfoDiv = document.getElementById('session-info');
                        sessionInfoDiv.innerHTML = JSON.stringify(result.data);
                    } else {
                        console.error('获取session信息失败');
                    }
                });
        }


    };
</script>
</body>

</html>